<template>
  <div class="config-group">
    <h4>标题组件配置</h4>
    
    <!-- 基础配置 -->
    <div class="config-section">
      <div class="section-title">基础配置</div>
      <div class="config-row">
        <div class="config-item flex-item">
          <label>标题文本：</label>
          <input 
            type="text" 
            v-model="localConfig.title"
            @input="updateConfig"
            placeholder="请输入标题"
          >
        </div>
      </div>
      
      <div class="config-row">
        <div class="config-item flex-item">
          <label>文字颜色：</label>
          <el-color-picker 
            v-model="localConfig.color"
            show-alpha
            @change="updateConfig"
            size="small"
            :predefine="predefineColors"
          />
        </div>
        <div class="config-item flex-item">
          <label>字体大小：</label>
          <input 
            type="text" 
            v-model="localConfig.fontSize"
            @input="updateConfig"
            placeholder="例如：18px"
          >
        </div>
      </div>

      <div class="config-row">
        <div class="config-item flex-item">
          <label>宽度：</label>
          <input 
            type="text" 
            v-model="localConfig.width"
            @input="updateConfig"
            placeholder="例如：690px"
          >
        </div>
        <div class="config-item flex-item">
          <label>高度：</label>
          <input 
            type="text" 
            v-model="localConfig.height"
            @input="updateConfig"
            placeholder="例如：40px"
          >
        </div>
      </div>

      <!-- 背景配置 -->
      <div class="config-section">
        <div class="section-title">背景设置</div>
        
        <!-- 背景图片配置 -->
        <div class="bg-image-config">
          <div class="preview-area">
            <div class="preview-box" :style="previewStyle">
              <span v-if="!localConfig.backgroundImage">暂无图片</span>
            </div>
          </div>
          <div class="image-controls">
            <div class="image-path">
              <span class="path-label">已选图片：</span>
              <span class="path-value">{{ getImageName(localConfig.backgroundImage) || '未选择' }}</span>
            </div>
            <div class="image-actions">
              <ImageSelector 
                v-model="localConfig.backgroundImage"
                @change="handleImageChange"
              />
            </div>
          </div>
        </div>

        <div class="config-row">
          <div class="config-item flex-item">
            <label>层级：</label>
            <input 
              type="number" 
              v-model.number="localConfig.zIndex"
              @input="updateConfig"
              placeholder="例如：1"
              min="0"
            >
          </div>
        </div>
      </div>
    </div>

    <!-- Tab选择器配置 -->
    <div class="config-section">
      <div class="section-title">Tab选择器配置</div>
      <div class="config-row">
        <div class="config-item flex-item">
          <label>显示Tab选择：</label>
          <el-switch
            v-model="localConfig.showTabs"
            @change="updateConfig"
          />
        </div>
      </div>

      <template v-if="localConfig.showTabs">
        <!-- Tab项配置 -->
        <div class="tabs-config">
          <div v-for="(tab, index) in localConfig.tabItems" :key="index" class="tab-item-config">
            <div class="tab-inputs">
              <div class="input-group">
                <label>标签文本</label>
                <input 
                  v-model="tab.label"
                  placeholder="请输入标签文本"
                  @input="updateConfig"
                >
              </div>
              <div class="input-group">
                <label>标签值</label>
                <input 
                  v-model="tab.value"
                  placeholder="请输入标签值"
                  @input="updateConfig"
                >
              </div>
            </div>
            <button @click="removeTabItem(index)" class="remove-btn">×</button>
          </div>
          <button @click="addTabItem" class="add-btn">
            <span class="btn-icon">+</span>
            添加标签项
          </button>
        </div>

        <!-- Tab公共配置 -->
        <div class="config-section">
          <div class="section-title">Tab公共配置</div>
          
          <!-- Tab尺寸配置 -->
          <div class="config-row">
            <div class="config-item flex-item">
              <label>Tab宽度：</label>
              <input 
                type="text" 
                v-model="localConfig.tabWidth"
                @input="updateConfig"
                placeholder="例如：80px"
              >
            </div>
            <div class="config-item flex-item">
              <label>Tab高度：</label>
              <input 
                type="text" 
                v-model="localConfig.tabHeight"
                @input="updateConfig"
                placeholder="例如：40px"
              >
            </div>
          </div>

          <!-- 背景图片尺寸配置 -->
          <div class="config-row">
            <div class="config-item flex-item">
              <label>背景图宽度：</label>
              <input 
                type="text" 
                v-model="localConfig.tabBgWidth"
                @input="updateConfig"
                placeholder="例如：80px"
              >
            </div>
            <div class="config-item flex-item">
              <label>背景图高度：</label>
              <input 
                type="text" 
                v-model="localConfig.tabBgHeight"
                @input="updateConfig"
                placeholder="例如：40px"
              >
            </div>
          </div>

          <!-- 文字配置 -->
          <div class="config-row">
            <div class="config-item flex-item">
              <label>默认文字颜色：</label>
              <el-color-picker 
                v-model="localConfig.tabTextColor"
                show-alpha
                @change="updateConfig"
                size="small"
                :predefine="predefineColors"
              />
            </div>
            <div class="config-item flex-item">
              <label>选中文字颜色：</label>
              <el-color-picker 
                v-model="localConfig.tabActiveTextColor"
                show-alpha
                @change="updateConfig"
                size="small"
                :predefine="predefineColors"
              />
            </div>
          </div>

          <div class="config-row">
            <div class="config-item flex-item">
              <label>文字大小：</label>
              <input 
                type="text" 
                v-model="localConfig.tabFontSize"
                @input="updateConfig"
                placeholder="例如：14px"
              >
            </div>
          </div>

          <!-- 背景图片配置 -->
          <div class="tab-images">
            <!-- 默认背景图片 -->
            <div class="image-group">
              <div class="image-title">默认背景图片</div>
              <div class="preview-area">
                <div 
                  class="preview-box" 
                  :style="{
                    backgroundImage: localConfig.tabBackgroundImage ? `url(${localConfig.tabBackgroundImage})` : 'none',
                    backgroundColor: localConfig.tabBackgroundImage ? 'transparent' : '#f5f5f5',
                    height: '60px'
                  }"
                >
                  <span v-if="!localConfig.tabBackgroundImage">暂无图片</span>
                </div>
              </div>
              <div class="image-controls">
                <ImageSelector 
                  v-model="localConfig.tabBackgroundImage"
                  @change="(path) => handleTabCommonImageChange('tabBackgroundImage', path)"
                />
              </div>
            </div>
            
            <!-- 选中状态背景图片 -->
            <div class="image-group">
              <div class="image-title">选中背景图片</div>
              <div class="preview-area">
                <div 
                  class="preview-box" 
                  :style="{
                    backgroundImage: localConfig.tabActiveBackgroundImage ? `url(${localConfig.tabActiveBackgroundImage})` : 'none',
                    backgroundColor: localConfig.tabActiveBackgroundImage ? 'transparent' : '#f5f5f5',
                    height: '60px'
                  }"
                >
                  <span v-if="!localConfig.tabActiveBackgroundImage">暂无图片</span>
                </div>
              </div>
              <div class="image-controls">
                <ImageSelector 
                  v-model="localConfig.tabActiveBackgroundImage"
                  @change="(path) => handleTabCommonImageChange('tabActiveBackgroundImage', path)"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 默认选中配置 -->
        <div class="config-row">
          <div class="config-item flex-item">
            <label>默认选中：</label>
            <select 
              v-model="localConfig.selectedTab"
              @change="updateConfig"
            >
              <option value="">无</option>
              <option 
                v-for="tab in localConfig.tabItems"
                :key="tab.value"
                :value="tab.value"
              >
                {{ tab.label }}
              </option>
            </select>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import ImageSelector from '../../common/ImageSelector.vue'

export default {
  name: 'CommonTitleConfig',
  components: {
    ImageSelector
  },
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      localConfig: {
        title: '标题文本',
        color: '#ffffff',
        fontSize: '18px',
        width: '690px',
        height: '40px',
        backgroundImage: '',
        zIndex: 1,
        showTabs: false,
        tabItems: [],
        selectedTab: '',
        tabActiveColor: '#1890ff',
        tabBackgroundImage: '',
        tabTextColor: '#ffffff',
        tabActiveTextColor: '#ffffff',
        tabFontSize: '14px',
        tabActiveBackgroundImage: '',
        tabWidth: '80px',
        tabHeight: '40px',
        tabBgWidth: '80px',
        tabBgHeight: '40px'
      },
      predefineColors: [
        '#ffffff',
        '#000000',
        '#409EFF',
        '#67C23A',
        '#E6A23C',
        '#F56C6C',
        '#909399',
        'rgba(255, 255, 255, 0.7)',
        'rgba(0, 0, 0, 0.7)'
      ]
    }
  },
  created() {
    // 如果没有 tabItems，添加默认的 tab 项
    if (!this.config.tabItems || this.config.tabItems.length === 0) {
      this.config.tabItems = [
        {
          label: '选项一',
          value: 'tab1',
          backgroundImage: require('@/assets/images/tab-bg.png'),
          activeBackgroundImage: require('@/assets/images/tab-bg-active.png')
        },
        {
          label: '选项二',
          value: 'tab2',
          backgroundImage: require('@/assets/images/tab-bg.png'),
          activeBackgroundImage: require('@/assets/images/tab-bg-active.png')
        },
        {
          label: '选项三',
          value: 'tab3',
          backgroundImage: require('@/assets/images/tab-bg.png'),
          activeBackgroundImage: require('@/assets/images/tab-bg-active.png')
        }
      ]
    }
    this.localConfig = { ...this.localConfig, ...this.config }
  },
  computed: {
    previewStyle() {
      return {
        backgroundImage: this.localConfig.backgroundImage ? `url(${this.localConfig.backgroundImage})` : 'none',
        backgroundColor: this.localConfig.backgroundImage ? 'transparent' : '#f5f5f5'
      }
    }
  },
  methods: {
    updateConfig() {
      this.$emit('update:config', { ...this.localConfig })
    },
    handleImageChange(imagePath) {
      this.localConfig.backgroundImage = imagePath
      this.updateConfig()
    },
    getImageName(path) {
      if (!path) return '';
      return path.split('/').pop();
    },
    addTabItem() {
      this.localConfig.tabItems.push({
        label: '新标签项',
        value: `tab-${this.localConfig.tabItems.length + 1}`
      })
      this.updateConfig()
    },
    removeTabItem(index) {
      this.localConfig.tabItems.splice(index, 1)
      this.updateConfig()
    },
    handleTabCommonImageChange(imageType, imagePath) {
      this.localConfig[imageType] = imagePath
      this.updateConfig()
    }
  }
}
</script>

<style scoped>
.config-group {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 6px;
}

.config-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.section-title {
  font-size: 13px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #eee;
}

.config-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.config-item.flex-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  flex: 1;
}

.config-item.flex-item label {
  width: auto;
  min-width: 70px;
  white-space: nowrap;
  color: #666;
  font-size: 13px;
}

.config-item.flex-item input,
.config-item.flex-item select {
  flex: 1;
  min-width: 80px;
  padding: 4px 8px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}

.preview-box {
  width: 100%;
  border: 2px dashed #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: #999;
  font-size: 13px;
  margin-bottom: 8px;
}

.bg-image-config {
  margin-top: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  padding: 12px;
}

.tabs-config {
  margin-bottom: 15px;
}

.tab-item-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  background: #f9f9f9;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #eee;
}

.tab-inputs {
  display: flex;
  gap: 8px;
  width: 100%;
}

.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-group label {
  font-size: 12px;
  color: #666;
}

.remove-btn {
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  align-self: flex-end;
  margin-top: -32px;
}

.add-btn {
  width: 100%;
  padding: 8px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.add-btn:hover {
  background: #40a9ff;
}

.tab-images {
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 4px;
}

.image-group {
  flex: 1;
}

.preview-box {
  width: 100%;
  border: 2px dashed #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #999;
  font-size: 13px;
}

.image-title {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.preview-area {
  margin-bottom: 12px;
}

.image-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-path {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.path-label {
  color: #666;
  white-space: nowrap;
}

.path-value {
  color: #1890ff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 